<template>
	<view class="page_box">
		<view class="bander">
			<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/666.png" mode=""></image>
			<view class="qiehuanlan">
				<u-subsection
					:list="list"
					:current="current"
					:animation="true"
					bold
					font-size="32"
					active-color="#FD5757"
					bg-color="transparent"
					button-color="transparent"
					inactive-color="#F5F5F5"
					@change="sectionChange"
				></u-subsection>
			</view>
		</view>

		<view class="content_box1" v-if="current === 0">
			<view class="box">
				<view class="one">
					<view class="left">
						<text>{{ user.pai }}</text>
						<image :src="usrData.avatar" mode=""></image>
						<text>{{ usrData.nickname }}</text>
					</view>
					<view class="right">{{ user.point || 0}}点</view>
				</view>
				<view class="" style="height: 158rpx; width: 100vw;"></view>
				<view v-for="(item, index) in personal" :key="index">
					<view
						class="two"
						:style="{
							backgroundColor:
								index === 0
									? '#ffede6'
									: index === 1
									? '#FFF9EC'
									: index === 2
									? '#FFF9EC'
									: '#fff'
						}"
					>
						<view class="left">
							<view class="image" v-if="index === 0">
								<image
									src="../../static/imgs/one.png"
									mode=""
									class="image2"
								></image>
							</view>
							<view class="image" v-if="index === 1">
								<image
									src="../../static/imgs/two.png"
									mode=""
									class="image2"
								></image>
							</view>
							<view class="image" v-if="index === 2">
								<image
									src="../../static/imgs/three.png"
									mode=""
									class="image2"
								></image>
							</view>
							<view class="image" v-if="index > 2">
								{{ index + 1 }}
							</view>
							<image
								:src="item.avatar"
								mode=""
								class="image1"
							></image>
							<text>{{ item.nickname }}</text>
						</view>
						<view class="right">{{ item.point || 0}}点</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content_box2" v-if="current === 1">
			<view class="box">
				<view class="one">
					<view class="left">
						<text>{{ user.pai }}</text>
						<image :src="usrData.avatar" mode=""></image>
						<text>{{ usrData.nickname }}</text>
					</view>
					<view class="right">{{ user.point|| 0 }}点</view>
				</view>
				<view class="" style="height: 158rpx; width: 100vw;"></view>
				<view v-for="(item, index) in team" :key="index">
					<view
						class="two"
						:style="{
							backgroundColor:
								index === 0
									? '#ffede6'
									: index === 1
									? '#FFF9EC'
									: index === 2
									? '#FFF9EC'
									: '#fff'
						}"
					>
						<view class="left">
							<view class="image" v-if="index === 0">
								<image
									src="../../static/imgs/one.png"
									mode=""
									class="image2"
								></image>
							</view>
							<view class="image" v-if="index === 1">
								<image
									src="../../static/imgs/two.png"
									mode=""
									class="image2"
								></image>
							</view>
							<view class="image" v-if="index === 2">
								<image
									src="../../static/imgs/three.png"
									mode=""
									class="image2"
								></image>
							</view>
							<view class="image" v-if="index > 2">
								{{ index + 1 }}
							</view>
							<image
								:src="item.avatar"
								mode=""
								class="image1"
							></image>
							<text>{{ item.nickname }}</text>
						</view>
						<view class="right">{{ item.team_pint || 0}}点</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shoprpCoupon from '@/components/shopro-coupon/shopro-coupon.vue';
export default {
	components: {
		shoprpCoupon
	},
	data() {
		return {
			usrData: {},
			user: {},

			user_id: '',
			personal: [],
			team: [],
			current: 0,
			list: [
				{
					name: '个人排行榜'
				},
				{
					name: '团队排行榜'
				}
			],
			couponList: []
		};
	},
	computed: {},
	onLoad(e) {
		// 进入不同的tab栏 stManagementMde warehouse
		this.current = this.$route.query.id;

		this.getCouponList();
		this.getUsers();
	},
	methods: {
		// 获取用户的id  
		async getUsers() {
			const res = await this.$api('user.info');
			this.usrData = {
				avatar: res.data.avatar,
				nickname: res.data.nickname
			};
			var uid = res.data.id;
			console.log('res :>> ', res);
			const res1 = await this.$api('leaderboard', {
				uid: 110
			});
			console.log('res1 :>> ', res1);
			this.personal = res1.personal;
			this.team = res1.team;
			this.user = res1.user;
		},

		sectionChange(index) {
			console.log('index :>> ', index);
			this.current = index;
		},
		onNav(id) {
			this.stateCurrent = id;
			this.couponList = [];
			this.getCouponList();
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getCouponList() {
			let that = this;
			that.$api('coupons.list', {
				type: that.stateCurrent
			}).then(res => {
				if (res.code === 1) {
					that.couponList = res.data;
				}
			});
		},

		//跳转优惠券详情
		toCouponDetail(data) {
			if (data.user_coupons_id) {
				this.jump('/pages/app/coupon/detail', {
					id: data.id,
					userCouponId: data.user_coupons_id
				});
			} else {
				this.jump('/pages/app/coupon/detail', { id: data.id });
			}
		}
	}
};
</script>

<style lang="scss">
.page_box {
	.bander {
		position: relative;
		width: 100vw;
		height: 300rpx !important;
		image {
			width: 100vw;
			height: 300rpx !important;
		}
		.qiehuanlan {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100vw;
		}
	}
	.content_box1,
	.content_box2 {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		.box {
			width: 690rpx;
			//height: 820rpx;
			border-radius: 10rpx;
			
			background: #ffffff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 31rpx;
			position: relative;
			.one {
				background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/-m-%E7%BB%84%2021%402x.png)
					no-repeat center;
				background-size: cover;
				width: 722rpx;
				height: 152rpx;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				margin-top: 19rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 46rpx;
				.left,
				.right {
					display: flex;
					align-items: center;
					justify-content: center;

					height: 27rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					line-height: 27rpx;
					image {
						width: 80rpx;
						height: 80rpx;
						margin: 0 30rpx;
					}
				}
			}

			.two {
				width: 690rpx;
				height: 120rpx;
				margin-top: 19rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 23rpx;
				//background-color: #ffede6;
				.left,
				.right {
					display: flex;
					align-items: center;
					justify-content: center;

					height: 27rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 27rpx;
					.image1 {
						width: 80rpx;
						height: 80rpx;
						margin: 0 30rpx;
					}
				}
				.left {
					.image {
						width: 49rpx;
						height: 39rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.image2 {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}
</style>
